by Ron Schwarz
This chapter covers the creation of "standard" HTML pages, using the ActiveX Control Pad. The word "standard" is in quotation marks, because even though these web pages only make use of script- and control-enabled HTML (as opposed to HTML Layout Page features), the ActiveX Control Pad provides the opportunity to create pages that are anything but "standard" in appearance and function. And the ease with which these pages can be managed will enable you to focus on the task at hand, rather than get bogged down in the minutia of HTML.
In this chapter, you use the ActiveX Control Pad to create a simple page, add a control, and enable it with a script. Throughout the example, you'll see references to objects, properties, code, and other programming language elements. Don't try to understand the guts of the language at this pointùthey're fully described elsewhere in this book (check the "From Here" section at the end of this chapter for references to other chapters)ùthe purpose of this chapter is to show you how to create a script-enabled HTML page using ActiveX controls, in a concise, step-by-step manner.
In this chapter
The ActiveX Control Pad is sometimes called (in jest) Visual Notepad. If anything, it's Notepad on steroids. Its appearance is deceptively simple. When you first run it, you see what appears to be little more than a text editor. As with all decent software, its real power is under the hood. You're never more than a few mouse clicks away from features that will literally shave hours from the development time of any significant project. This little program is not to be underestimated, nor should the fact that Microsoft is giving it away at no cost be misconstrued to imply that it's of limited usefulness.
Start the ActiveX Control Pad (see fig. 4.1), either by finding it in your Start Menu, or by navigating to it via Explorer or "My Computer."
This is the ActiveX control pad.
Figure 4.1 shows the ActiveX Control Pad as it first appears when run. As you can see, it automatically creates a skeleton for your project, consisting of <HTML>, <HEAD>, <TITLE>, and <BODY> blocks. (The blank line in the <BODY> block is where you'll put your content.) It also creates a default filename of "Page1," and a default Title of "New Page".
So far, so good. Now, for the good part. Let's say you want to put a Command Button on the page, and have it take the user to www.microsoft.com when it's clicked. You can do it the hard way, with lots of HTML, or, you can do it the easy way with an ActiveX control. The ActiveX Control Pad makes it extremely simple.
The first thing you need to do is insert the Button. To do this, bring up the context menu by clicking the mouse on the blank line. This puts the cursor at the position you want the control to appear. Now, move the mouse over the vertical gray area to the left of the editing area, and click its right button once. You'll then see a context menu like the one in Figure 4.2.
ActiveX control pad context menu.
In Figure 4.2, the "Insert ActiveX Control" menu item is selected. Select it on your machine, and click. In a few seconds, you'll see the Insert ActiveX Control dialog. Find the entry for "Microsoft Forms 2 Command Button", as shown in Figure 4.3.
Insert ActiveX control dialog.
Once you've selected the Command Button, either double-click its entry, or, click the "OK" button. Once you do that, you'll see two new windows floating over the Control Padù"Edit ActiveX Control", and "Properties", shown in Figure 4.4. If you've used VB before, things may be starting to appear familiar.
Control editing.
The "Edit ActiveX Control" window contains what appears to be a small VB-style form, containing a single button control. It's not really a form, however. It's just a container to hold the prototype of the control, to provide you a context for editing purposes. When you're done editing, the control itself will be placed into the HTML on the page, without any trace of the "form."
The other window (the "Properties" window) contains a list of properties and settings that apply to the control. From here, you can set starting properties that will determine the condition of the control when the page first loads.
One advantage many of the ActiveX controls hold over their earlier VB counterparts is the ability to edit Caption and Text properties in-place. What the means is that you can type Button and Label captions right on the buttons, and TextBox text can be typed into the text. Other controls feature drag and drop capability too.
To assign a caption to the button in this example, you can either locate its Caption property in the Properties window, or, you can enter it directly on the button. To enter it directly, click one time on the button, to bring the focus to the control. Then, wait a second or two. Then, click one more time. (The reason for the delay between clicks is to avoid sending a double-click.)
As soon as you click the second time, you'll see a cursor appear in the center of the button. Type Go West!. As you type, the letters will appear one by one on the button. Because button captions are centered, the text will move to the left and right as you enter it, maintaining its centering.
After you've finished entering the caption, your screen should look like the example in Figure 4.5.
Entering a caption.
Click the Close button on the "Edit ActiveX Control" editing window (the small "x" in the upper-right-hand corner of the window). This will return you to the ActiveX Control Pad's main HTML editing window, with the declaration for the button placed into the <BODY> block, as shown in Figure 4.6.
Viewing the updated HTML code.
Notice the button that now appears in the gray area on the left of the editing window. You'll have one next to each embedded control on the page, and it's used for editing the control.
Now, save the file by clicking the Save button (the toolbar button with a floppy disk icon). You'll be prompted to save "Page1.htm". Click the "Save" button to save the file.
Once you've saved the file, run it by opening the folder it's in (or, browsing there with Explorer or "My Computer"), and double-clicking the "Page1" icon. After Internet Explorer runs, you'll see your page, which will look like the example in Figure 4.7.
Command button example in IE.
Although you have a button on the page, if you click it, nothing will happen; you can't do anything with it until you add some code, which is explained in "Adding Event Code" later in this chapter.
You've got a button on a page, but it's a bit large for its text, so, go back into the ActiveX Control panel, and click the button to the left of the Control declaration. You'll be taken back into control editing mode, which means you'll again have the control visible in its editing window, and the Properties window shown on the right.
To resize the button, you can either edit its Height and Width properties in the Properties window, or, you can simply "grab" it with the mouse, and resize it. To do this, point the mouse at one of the "sizing handles" (the white squares on the sides and corners of the control). You'll see the mouse pointer change to a diagonal dual-headed arrow, which indicates that when you resize from here, you'll be changing both width and height. (If you move the mouse over the top or side border, the mouse pointer will be either vertical or horizontal, indicating the ability to change either height or width; moving anywhere else over the control results in a pointer with four arrows, which allows you to move the control; however, since positioning a control's XY coordinates has no effect in a standard HTML page, it should be disregarded.)
To do the actual resizing, hold down the left mouse button, then, drag the mouse toward the center of the control. You'll see a rectangle composed of a dotted-line follow the mouse, indicating the new size, as shown in Figure 4.8.
Resizing a control.
When you release the button, the control will resize to the new size, as shown in Figure 4.9. After you've resized the control, click the Close button in the upper-right-hand corner of the "Edit ActiveX Control" window to save the changed properties back to your HTML page.
Control after resizing.
Before you can do anything with the button, you'll need to add some event code in a script to intercept mouse clicks. The easiest way to do this is to use the Script Wizard that's built into the ActiveX Control Pad. To bring up the Script Wizard, point the mouse anywhere over the gray area to the left of the editing window (other than over a control button) and click the right button. This will display the context menu, as shown in Figure 4.10. Select "Script Wizard", and click.
As this book goes to press, Microsoft is suggesting placing scripts in the <HEAD> section in some of their documentation, and at the end of the <BODY> section in other writings. The execution of scripts is unaffected by placement, and the pre-release version of the Script Wizard currently available for testing places scripts in the <BODY> section. This may change in future releases of the Control Pad.
Selecting the script wizard.
The Script Wizard, shown in Figure 4.11, provides a convenient platform for creating event code and procedures, and, an easy way to insert property settings and invoke methods for controls and objects.
The script wizard.
The Script Wizard consists of three main areas: two tree lists, and one code window. The code window has two modesùit can be used in "List View," or "Code View". (Figure 4.11 shows List View.) In List View, it displays a list of actions taken when events occur. These actions are generated automatically according to selections you make. In Code View, the Script Wizard creates event code headers, and property and method code skeletons for you, and lets you write whatever other code you want.
The outline list on the left is captioned "Select an Event. It contains a list of objects on the page, and, when expanded, shows the events that each object exposes. Click the plus ("+") sign next to "CommandButton1" to expand its list of events, and click "Click". You'll then see "On CommandButton1 Click Perform the following Actions:" in the bottom pane, as shown in Figure 4.12, indicating that the Script Wizard has created an Event Procedure for the button's Click event.
Creating an event procedure.
Now, it's necessary to place some code into the routine. (When the user clicks the button, any code residing in its Click procedure (or "routine") will be automatically executed.) The Script Wizard makes this easy. In the outline list on the right("Insert Actions:"), click the plus sign next to "Window", to expand the properties belonging to the Window object. You'll then see a number of entries (shown in Figure 4.13), several of which also show plus signsùthe Window object consists of a hierarchy nested several layers deep.
FIG. 4.13
The window Object Hierarchy.
Find the entry for "location", and click its plus sign to expand it, then click href, as in Figure 4.14.
Expanded view of window.location.
At this point, it's time to tell the Script Wizard what to do with the href property. So, double-click "href", and a dialog captioned "Change Window.location href" appears. It will contain a textbox, with a caption saying, "Please enter a string constant value". Type http://www.microsoft.com, as shown in Figure 4.15, then click the OK button.
"Change window.location href" dialog box.
After you click OK, the bottom panel will contain an entry saying Go To Page "http://www.microsoft.com" as shown in Figure 4.16. Click the Script Wizard's OK button to return to the HTML editing window, and the script it's just created will be inserted into the <BODY> section, shown in Figure 4.17. You're now ready to save the updated file, and run it. (If you've still got the previous version of Page1.htm loaded in Internet Explorer, just click the "Refresh" button on its toolbar to have it load the new version.)
Event entry created by script wizard.
Script inserted into HTML.
When you run the example, it will appear exactly as it did in Figure 4.7, before you added the script. To demonstrate the fact that it's changed, click the button. This time, instead of nothing happening, as it did before, you'll be transferred to the Microsoft home page. (To return to the page you just created, click the "Back" button on Internet Explorer's toolbar.)
In the gray area to the left of the editing window in Figure 4.17, you can see a button next to the script that the Script Wizard inserted. Just as controls have buttons to bring up the control editing windows, scripts have buttons to bring up the Script Wizard. You use the Script wizard for editing existing scripts, as well as for creating new ones.
Click the button, and you'll be back in the Script Wizard. Now, click the "Code View" option button, and you'll see that the bottom panel now shows the actual code created by the Wizard, shown in Figure 4.18.
Event code in script wizard.
The event code consists of two lines:
Sub CommandButton1_Click()
Window.location.href = "http://www.microsoft.com"
The first line is the procedure declaration. It's in a section by itself, and, you can't edit it. (Actually, you can edit it, but to do so you need to right-click over it, and select the "Edit Procedure Prototype" option.) The second line is the actual code, and, you can edit its section. Change it by adding one line above it, and one below it, and, indent the original line, as shown below, and in Figure 4.19, then click the OK button to return to the HTML editor.
If MsgBox("Really Go West?", 4) = 6 Then
Window.location.href = "http://www.microsoft.com"
End If
Script code after editing.
When you're back in the HTML editor, save the file, and reload it into Internet Explorer, then run it again by clicking the "Go West!" button. You'll see a message box asking "Really Go West?", which has two buttons: "Yes," and "No," and is shown in Figure 4.20.
Message box in Internet Explorer.
If you click the "No" button, nothing will happen; if you click the "Yes" button, you'll be taken to the Microsoft web site.
Although this example used the href property to change to a new URL, it's such a common operation that the Script Wizard offers an easy way to automate it. Just right-click over the lower panel of the Wizard, and you'll see a context menu which offers you a shortcut to insert "go to page" code. It makes it really easy to use controls for creating links to other pages, without writing a single line of code. You'll find this especially useful when you use the ActiveX Control Pad in HTML Layout Page mode, which is covered in Chapter 5, "Creating an HTML Layout Page".
In this chapter, you learned how to use the ActiveX Control Pad to create standard HTML pages. You discovered how to insert and edit ActiveX controls, and work with scripts.
| Previous Chapter | Next Chapter |
| Search | Table of Contents | Book Home Page | Buy This Book |
| Que Home Page | Digital Bookshelf | Disclaimer |
To order books from QUE, call us at 800-716-0044 or 317-361-5400.
For comments or technical support for our books and software, select Talk to Us.
© 1996, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company.
